<template>
    <div class="action-sheet text-center">
        <ul class="action-list">
            <router-link tag="li" to="/">
                <div>
                    <span><i class="img-icon img-icon-home"></i><p>主页</p></span>
                </div>
            </router-link>
            <li>
                <div @click="showPromptDialog">
                    <span><i class="img-icon img-icon-zixun"></i><p>咨询</p></span>
                </div>
            </li>
            <router-link tag="li" to="/mine">
                <div>
                    <span><i class="img-icon img-icon-user"></i><p>个人中心</p></span>
                </div>
            </router-link>
        </ul>
        <button class="button-block" @click="hideNavBar">取消</button>
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    computed: {},
    methods: {
        hideNavBar(){
            this.$emit('hideNavBar', false);
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.action-sheet {
    width: 100%;
    font-size: 24px;
    color: #333;
    background-color: #eceded;

    .action-list {
        display: flex;
        height: 128px;
        margin-bottom: 14px;
        background: #fff;
        > li {
            flex: 1;
            height: 128px;
        }

        div {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content:center;
        }
        span{display: inline-block;}
        i {
            display: inline-block;
            width: 40px;
            height: 48px;
            margin-bottom: 8px;
            background-size: contain;
        }
    }

    .button-block{
        width: 100%;
        height: 90px;
        line-height: 90px;
        font-size: 30px;
        text-align: center;
        background-color: #fff;
    }
}

</style>